<template>
	<div class="multi-selection-action-container">
		<ul>
			<li>
				<div class="action" @click="forwardOneByOne">
					<div class="icon">
						<i class="icon-ion-forward"></i>
					</div>
					<p>{{ $t('conversation.forward_one_by_one') }}</p>
				</div>
			</li>
			<li>
				<div class="action" @click="forwardComposite">
					<div class="icon">
						<i class="icon-ion-quote"></i>
					</div>
					<p>{{ $t('conversation.forward_composite') }}</p>
				</div>
			</li>
			<li>
				<div class="action" @click="fav">
					<div class="icon">
						<i class="icon-ion-android-favorite"></i>
					</div>
					<p>{{ $t('common.fav') }}</p>
				</div>
			</li>
			<li>
				<div class="action">
					<div @click="deleteMultiMessage" class="icon">
						<i class="icon-ion-android-delete"></i>
					</div>
					<p>{{ $t('common.delete') }}</p>
				</div>
			</li>
			<li>
				<div class="action">
					<i @click="hideMultiSelectionActionView" class="icon-ion-close"></i>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import store from '@/store'
	import ForwardType from '@/pages/conversation/message/forward/ForwardType'

	export default {
		name: 'MessageMultiSelectionActionView',
		data() {
			return {
				sharedPickState: store.state.pick
			}
		},
		methods: {
			deleteMultiMessage() {
				store.deleteSelectedMessages()
			},

			hideMultiSelectionActionView() {
				store.toggleMessageMultiSelection()
			},

			forwardOneByOne() {
				let messages = [...this.sharedPickState.messages]
				this.$forward({
					forwardType: ForwardType.ONE_BY_ONE,
					messages: messages
				})
				store.toggleMessageMultiSelection()
			},

			forwardComposite() {
				let messages = [...this.sharedPickState.messages]
				this.$forward({
					forwardType: ForwardType.COMPOSITE,
					messages: messages
				})
				store.toggleMessageMultiSelection()
			},

			fav() {
				let messages = [...this.sharedPickState.messages]
				this.$parent.favMessages(messages)
				store.toggleMessageMultiSelection()
			}
		}
	}
</script>

<style lang="less" scoped>
	.multi-selection-action-container {
		width: 100%;
		height: 203px;
		min-height: 204px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1px solid #e2e2e2;
	}

	ul {
		list-style: none;
	}

	ul li {
		display: inline-block;
	}

	.action {
		font-size: 13px;
		padding: 0 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.action .icon {
		width: 60px;
		height: 60px;
		background-color: white;
		border-radius: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action .icon:active {
		background-color: lightgrey;
	}

	.action p {
		padding-top: 10px;
	}

	.action i {
		font-size: 20px;
	}
</style>
